Shiny Walkthrough

Shiny

Shiny is an R package that makes it easy to build interactive web apps straight from R. You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards. You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions.

Shiny is most often used with the packages “shinydashboard” or “flexdashboard” to build interactive dashboards. We will walk through how to use both shinydashboard and flexdashboard to give you options when using shiny.

Shiny dashboard structure (UI - user interface)

3 Main parts:

• Header - dashboardHeader()
• Sidebar - dashboardSidebar()
• Body - dashboardBody()

How to build a Sidebar Dashboard

library(shinydashboard)

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Data",
      tabName = "data") #Used for linking in the body
  )
)

If you want more interactivity on your dashboard, shiny has some functions that enables you to do that. You can use a number of different input options using shiny. This allows the user of the website to input information - whether it’s text, a date, or to select options from data that you provide.

Different input functions: * selectInput() # Allows user to select a singular item from a list * textInput() # Allows user to input text * dateInput() # Allows user to input a date * checkboxInput()

How to build user input with shinydashboard

library("shiny")
library("tidyverse")

selectInput(
  inputId = "object", # This is the name you described the object elsewhere in the application
  label = "Favorite Character", # The label you want to show to the user
  choices = c(starwars$name) # List the choices the user has to pick from
 )

Render Functions

Functions that you use in your application’s server side code, assigning them to outputs that appear in your user interface.

• renderPrint()
• renderText()
• renderPlot()
• renderUI() # HTML or a shiny tag object

Example Using Star Wars df

header <- dashboardHeader(
  title = "Example Dashboard Header",
  color = 'green'
)

[1] "green"

Error in FUN(X[[i]], ...) : Expected an object with class 'shiny.tag'.

After you code the sidebar and body, you can then create the User Interface, or “ui”. The User Interface is built from a header, sidebar, and body. When you modify any of these options, the easiest way is to save it as an object called “header”, “sidebar”, or “body”. The user interface is most often coded into the dashboardPage() function.

ui <- dashboardPage(header = header,
                    sidebar = sidebar,
                    body = body
                    )

server <- function(input, output) {
  output$name <- renderText({
      input$name
    })
}

shinyApp(ui, server)

Shinydashboard Layout

There are two main types of layouts that shiny uses. The first is a “row” based layout, while the other is a “column” based layout. You can use either one, or even a mix of the two. The way to create the layouts is by using the “fluidRow()” function.

These functions are used inside of the dashboardBody() section. Each time “fluidRow()” is called, a new row is created.

Row layout

body <- dashboardBody(
  fluidRow(
# Row 1
  box(
  width = 12, # 12 width spans the entire width of the screen
  title = "Regular Box, Row 1",
  "Text inside of box"
  )),
  fluidRow(
# Row 2
  box(
  width = 12,
  title = "Regular Box, Row 2",
  "Text inside of box 2"
  )
)
)
ui <- dashboardPage(header = dashboardHeader(),
                    sidebar = dashboardSidebar(),
                    body = body
                    )

ui

Column Layout

body <- dashboardBody(
    fluidRow(
    #   Column 1
      column(width = 6,
      infoBox(
        width = NULL, # The width must be "NULL" when using a column layout
        title = "Regular Box, Column 1",
        "Text inside of box"
         )      
   ),
  column(width = 6,
    #   Column 2
      infoBox(
        width = NULL, # The width must be "NULL" when using a column layout
        title = "Regular Box, Column 2",
        "Text inside of box"
         )      
   )
)
)
ui <- dashboardPage(header = dashboardHeader(),
                    sidebar = dashboardSidebar(),
                    body = body
                    )

shinyApp(ui, server)

Mix of Column and Row Layout

Note: To create a new row, you call another fluidRow() function.

body <- dashboardBody(
    fluidRow(
    #   Row 1
      box(
        width = 12, # The width must be "NULL" when using a column layout
        title = "Regular Box, Row 1",
        "Text inside of box"
         ),
    ),
  fluidRow(
    column(width = 6,
    #   Column 2
      infoBox(
        width = NULL, # The width must be "NULL" when using a column layout
        title = "Regular Box, Row 2, Column 1",
        subtitle = "Text inside of box"
         )
    ),
    column(width = 6,
      infoBox(
        width = NULL,
        title = "Regular Box, Row 2, Column 2",
        subtitle = "Text inside of box"
      )
    )
  )
)

ui <- dashboardPage(header = dashboardHeader(),
                    sidebar = dashboardSidebar(),
                    body = body
                    )

shinyApp(ui, server)

Flexdashboard

Flexdashboard is a similar dashboard system as shiny. A flexdashboard is filled with charts. To create a flexdashboard, you will first need to adjust the YAML header.

title: “title of document” output: flexdashboard::flex_dashboard

Now your Rmarkdown file will be interpreted as a flexdashboard file.

The flexdashboard default layout is in columns. To separate the columns, you will use the following syntax:

library(flexdashboard)

Column

Chart A

Column

Chart B

Chart C